<template>
    <div>
        <van-icon name="arrow-left" size="30" style="flex: 1" @click="back()" />
        {{ this.$route.params.name }}

        <van-tabs v-model="active">
  <van-tab title="封面"><div class="tab1">
        <div class="song-info-img"><img :src="getUrl" alt="" srcset="" /></div>
        <br />
        <div class="box">
<router-link :to="'/comment/'+this.$route.params.id" style="flex: 1"><van-icon name="comment-o" size="40"  /></router-link>
            
            <van-icon name="like-o" size="40" style="flex: 1" @click="likeit()" ref="like"/>
            <van-icon name="ellipsis" size="40" style="flex: 1" />
            <van-icon name="down" size="40" style="flex: 1" />
        </div>
</div>内容 1</van-tab>
  <van-tab title="歌词" @click="ajaxLyric()+'不支持？？'">
  <div v-for="eleLrc in dataLrc" :key="eleLrc.id">
      {{eleLrc}}
  </div>
  </van-tab>
</van-tabs>

        <audio :src="musicUrl" controls>
            <!-- <source src="http://m701.music.126.net/20220521170144/a6255cd3379c5598d8cc17adb1cdf498/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/14556678385/9b81/c537/3cd0/0557bbea3d08df5afa3f0cd521cfaf6e.mp3" >   -->
        </audio>
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            musicUrl: "",
            flag: Boolean,
            active: 2,
            dataLrc: [],

        };
    },
    mounted() {
        this.ajaxPlay();
        this.ajaxLyric();
    },
    computed: {
        getUrl() {
            return decodeURIComponent(this.$route.params.picUrl);
        },
    },
    methods: {
        back() {
            window.history.back()
        },
        likeit() {
            let url = "http://121.41.51.182:3000/like?id=" + this.$route.params.id;
            // let flag = false;
            console.log(this.$route.params.id);
            return axios({
                method: "get",
                timeout: 1000 * 30,
                url: url,
                dataType: "json",
                withCredentials: 1,
            })
                .then((res) => {
                    if (this.flag) {
                        // url += '&like=false';
                    this.$refs.like.className = 'van-icon van-icon-like';
                    console.log(123123);
                    
                    } else {
                        this.$refs.like.className = 'van-icon van-icon-like-o';
                    }
                    this.flag = !this.flag;
                    this.$toast.success('成功文案');
                    console.log(res);
                    return res;
                })
                .catch(function (error) {
                    alert("获取失败，请稍后重试");
                    console.log(error);
                });
        },
        ajaxPlay() {
            let url = "http://121.41.51.182:3000/song/url?id=" + this.$route.params.id;
            console.log(this.$route.params.id);
            return axios({
                method: "get",
                timeout: 1000 * 30,
                url: url,
                dataType: "json",
                withCredentials: true
            })
                .then((res) => {
                    this.musicUrl = res.data.data[0].url;
                    // this.detail = JSON.parse(JSON.parse(JSON.stringify(res.request.response)));
                    // console.log(res.data.data[0].url);
                    // console.log(res);
                    // console.log(this.musicUrl);
                    return res;
                })
                .catch(function (error) {
                    alert("获取失败，请稍后重试");
                    console.log(error);
                });
        },
        ajaxLyric(){
            console.log(123);
        let url = "http://121.41.51.182:3000/lyric?id=" + this.$route.params.id;
            // console.log(this.$route.params.id);
            return axios({
                method: "get",
                timeout: 1000 * 30,
                url: url,
                dataType: "json",
                withCredentials: true
            })
                .then((res) => {
                    this.dataLrc = res.data.lrc.lyric.split('\n');
                    // console.log(res.data.lrc.lyric.split('\n'));
                    // this.detail = JSON.parse(JSON.parse(JSON.stringify(res.request.response)));
                    // console.log(res.data.data[0].url);
                    // console.log(res);
                    console.log(this.dataLrc);
                    return res;
                })
                .catch(function (error) {
                    alert("获取失败，请稍后重试");
                    console.log(error);
                });
    }
    },
    
};
</script>

<style scoped>
.box {
    display: flex;
}

.song-info-img {
    text-align: center;
    
}

.song-info-img img {
    margin: 50px;
    width: 65%;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.31);
}

audio {
    width: 100%;
    position: absolute;
    bottom: 15px;
}
</style>